import React,{useState,useEffect,useCallback} from 'react'
import { CSSTransition } from 'react-transition-group'
import { useNavigate } from 'react-router-dom'
import {
    Container,
    ShortcutWrapper,
    HotKey
} from './style'
import SearchBox from '@/components/common/search-box'
import { Button, SearchBar, Space, Toast } from 'antd-mobile'
import Scroll from '@/components/common/Scroll'
import { 
    getCitiesDataAction
} from '@/store/actionCreators'
import { rootState } from '@/store';
import { Dispatch } from 'redux'
import { connect } from 'react-redux';

interface SearchProps{
    // back:any;
    // children:any[];
    // loading:boolean;
    // img:any[];
    // getHomeDataActionDispatch:()=>void;
  }

const Search:React.FC<SearchProps> = (props) => {
    const [show, setShow] = useState(false);
    const [query, setQuery] = useState('');

    const navigate = useNavigate();
    const searchBack = useCallback(() => {
        setShow(false)
    }, [])
    const handleQuery = (q) => {
        // console.log(q)
        // 给子组件防抖后得到的数据修改方法
        setQuery(q)
    }
    useEffect(() => {
        setShow(true)
        
    }, [])
    const {cities}=props;
    const {
        getCitiesDataActionDispatch
      }=props
    
    useEffect(() => {
        getCitiesDataActionDispatch();
        console.log(cities);
    }, [])
    const renderHotKey = () => {
        let list = cities ? cities : [];
        return (
            <ul>
                {
                    list.map(item => {
                        return (
                            <li
                                className="item"
                                key={item.id}
                                onClick={() => setQuery(item.city)}
                            >
                                <span>{item.city}</span>
                            </li>
                        )
                    })
                }
            </ul>
        )
    }
  return (
    <CSSTransition
        in={show}
        timeout={300}
        appear={true}
        classNames="fly"
        unmountOnExit
        onExit={() => {
            navigate(-1)
        }}
    >
        <Container >
        <SearchBox
            back={searchBack}
            // newQuery={query}
            // handleQuery={handleQuery}
        >
        </SearchBox>
        <ShortcutWrapper show={!query}>
            <div className='shortcut'>
                <Scroll>
                    <div>
                        <HotKey>
                            <h1 className='title'>热门搜索</h1>
                            {renderHotKey()}
                        </HotKey>
                    </div>
                </Scroll>
            </div>
        </ShortcutWrapper>
            
        </Container>
    </CSSTransition>
  )
}

const mapStateToProps = (state:rootState) => {
    return {
        cities:state.MainCities.cities,
    }
}
const mapDispatchToProps = (dispatch:Dispatch) => {
    return {
        getCitiesDataActionDispatch(){
            dispatch(getCitiesDataAction())
          }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Search))

